/**
 * Created by Jimmy on 2018/12/27.
 */
<template>
  <div>
    奖金报表 [包括产值分配(必选)/项目成本/用车分摊]
    <!--添加项目-->
    <div class="operation">
      <el-popover
        v-model="showSearchProject"
        placement="bottom"
        width="900"
        trigger="click">
        <el-input placeholder="请输入项目名称搜索" v-model="searchProjectInput" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="searchProject"></el-button>
        </el-input>
        <div class="show-search">
          <el-table
            :data="searchProjectData"
            highlight-current-row
            @current-change="clickProjectsTable">
            <el-table-column width="100" property="TypeName" label="类型" align="center"></el-table-column>
            <el-table-column width="150" property="ProjectNumber" label="编号" align="center"></el-table-column>
            <el-table-column width="100" property="PmName" label="负责人" align="center"></el-table-column>
            <el-table-column width="100" property="Qcoe" label="质检系数" align="center"></el-table-column>
            <el-table-column width="450" property="ProjectName" label="项目名称" align="center"></el-table-column>
          </el-table>
        </div>
        <el-button slot="reference" type="primary" icon="el-icon-plus" size="mini" >添加项目</el-button>
      </el-popover>
    </div>
    <div class="project-content">
      <projectitem v-for="(project, i) in projects"
                   :key="project.ID"
                   :project="project"
                   :index="i"
                   :searchData = "projectsSelected[i]"
                   @deleteProjectByIndex="deleteProjectByIndex"
                   @addAllocationByObjec="addAllocationByObjec"
                   @deleteAllocationByObject="deleteAllocationByObject"
                   @addProjectCostByObject="addProjectCostByObject"
                   @deleteProjectCostByObject="deleteProjectCostByObject"
      >
      </projectitem>
    </div>
    <!--用车记录-->
    <div class="operation">
      <el-popover
        placement="bottom"
        width="1000"
        trigger="click">
        <div class="show-search">
          <el-table
            ref="carTable"
            :data="carCostSelected"
            highlight-current-row
            @current-change="clickCarCostTable">
            <el-table-column width="100" property="UseDate" label="日期" align="center"></el-table-column>
            <el-table-column width="100" property="CarNumber" label="车牌号" align="center"></el-table-column>
            <el-table-column property="RefuellingAmount" label="加油金额" width="100" align="center"></el-table-column>
            <el-table-column property="RechargeAmount" label="充值金额" width="100" align="center"></el-table-column>
            <el-table-column property="ProjectName" label="关联项目" align="center" width="300"></el-table-column>
            <el-table-column property="Desc" label="备注" align="center" width="300"></el-table-column>
          </el-table>
        </div>
        <el-button slot="reference" type="primary" icon="el-icon-plus" size="mini" >添加用车记录</el-button>
      </el-popover>
    </div>
    <div class="project-content">
      <div class="project">
        <el-table
          :data="carCosts"
          border
          :stripe= 'true'
          class=""
          style="width:100%">
          <el-table-column prop="UseDate" label="日期" width="100" align="center"></el-table-column>
          <el-table-column prop="CarNumber" label="车牌号" width="100" align="center"></el-table-column>
          <el-table-column prop="RefuellingAmount" label="加油金额" width="100" align="center"></el-table-column>
          <el-table-column prop="RechargeAmount" label="充值金额" width="100" align="center"></el-table-column>
          <el-table-column prop="ProjectName" label="关联项目" align="center"></el-table-column>
          <el-table-column prop="Desc" label="备注" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button type="danger" size="mini"  @click="deleteCarCost(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="generate-report">
      <el-button type="primary" :loading="loading" @click="generate">生成报表</el-button>
    </div>  </div>
</template>

<script>
  import projectitem from '../components/bonus/projectItem.vue'
  export default {
    components: {
      projectitem
    },
    data(){
    return {
      loading:false,
      showSearchProject:false,
      searchProjectInput:'',
      searchProjectData:[], // 搜索结果列表

      projectsSelected:[], // 添加后的到这里选则
      projects: [], // 上面选中后的到这里 -> excel基础数据1

      searchCarCostInput:'',
      carCostSelected:[],
      carCosts:[] // excel基础数据2

    };
  },
    created: function(){
    let user = JSON.parse(window.localStorage.getItem('access-user'))
    this.token = user.Token
  },
    methods:{
      clickProjectsTable(row){
        // 去重
        if (row) {
          var flag = true
          this.projects.forEach((project) => {
            if (project.ID === row.ID){
              flag = false
            }
          })
          if (flag) {
            var row1 = this.deepCopy(row)
            this.projectsSelected.push(row1)
            var row2 = this.deepCopy(row)
            row2.Allocations = []
            row2.ProjectCosts = []
            this.projects.push(row2)

            row1.Cars.forEach((car) => {
              var flagx = true
              this.carCostSelected.forEach((obj) => {
                if(obj.ID === car){
                  flagx = false
                }
              })
              if (flagx){
                this.carCostSelected.push(this.deepCopy(car))
              }
            })

          }
          this.showSearchProject = false
          this.searchProjectInput = ""
          this.searchProjectData = []
        }

      },
      clickCarCostTable(row){
        if (row) {
          var flag = true
          this.carCosts.forEach((car) => {
            if (car.ID === row.ID){
              flag = false
            }
          })
          if (flag) {
            this.carCosts.push(this.deepCopy(row))
          }
        }
        this.$refs.carTable.setCurrentRow();
      },
      searchProject(){
        this.$http.post(this.domain + '/bonus/search/project',
          {
            token:this.token,
            name:this.searchProjectInput
          }
        ).then((response) => {
          if (response.data.Success) {
            console.log(response.data)
            this.searchProjectData = response.data.Data
          } else {
            this.$message.error(response.data.Msg)
          }
        }).catch(function (response) {
          this.$message.error(response.data)
        })
      },
      deepCopy(obj) {
        var result = Array.isArray(obj) ? [] : {};
        for (var key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object') {
              result[key] = this.deepCopy(obj[key]);   //递归复制
            } else {
              result[key] = obj[key];
            }
          }
        }
        return result;
      },
      deleteProjectByIndex(index){
        var project = this.projects[index]
        project.Cars.forEach((car)=>{
          this.carCostSelected.forEach((obj,index)=>{
            if (car.ID === obj.ID){
              this.carCostSelected.splice(index,1)
            }
          })
          this.carCosts.forEach((obj,index)=>{
            if (car.ID === obj.ID){
              this.carCosts.splice(index,1)
            }
          })
        })
        this.projects.splice(index, 1)
        this.projectsSelected.splice(index, 1)
      },
      addAllocationByObjec(index,obj){
        if(obj){
          this.projects[index].Allocations = []
          this.projects[index].Allocations.push(obj)
        }
      },
      deleteAllocationByObject(index,obj){
        this.projects[index].Allocations = []
      },
      addProjectCostByObject(index,obj){
        if(obj){
          var flag = true
          this.projects[index].ProjectCosts.forEach((cost)=>{
            if(cost.ID === obj.ID){
              flag = false
            }
          })
          if (flag){
            var rowx = this.deepCopy(obj)
            this.projects[index].ProjectCosts.push(rowx)
          }
        }
      },
      deleteProjectCostByObject(index,obj){
        if(obj){
          var flag = -1
          this.projects[index].ProjectCosts.forEach((cost,idx)=>{
            if(cost.ID === obj.ID){
              flag = idx
            }
          })
          if (flag >-1 ){
            this.projects[index].ProjectCosts.splice(flag,1)
          }
        }
      },
      deleteCarCost(row){
        if(row){
          var flag = -1
          this.carCosts.forEach((cost,idx)=>{
            if(cost.ID === row.ID){
              flag = idx
            }
          })
          if (flag >-1 ){
            this.carCosts.splice(flag,1)
          }
        }
      },
      generate(){
        this.loading = true
        var flag = false
        if (this.projects.length === 0) {
          this.$message.error("请添加项目！")
          this.loading = false
          return
        }
        this.projects.forEach((project,index) => {
          if(project.Allocations.length !== 1){
            this.$message.error("第 " +(index+1)+" 个项目未选择分配记录")
            flag = true
          }
        })
        if(flag){
          this.loading = false
          return
        }
        let arg = JSON.stringify({
          projects:this.projects,
          carCosts:this.carCosts
        })
        this.$http.post(this.domain + '/bonus/generate',
          {
            token:this.token,
            arg:arg
          }
        ).then((response) => {
          if (response.data.Success) {
            let downloadElement = document.createElement('a');
            let href = this.domain +response.data.URL; //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = response.data.Title; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href);
            this.loading = false
          } else {
            this.$message.error(response.data.Msg)
            this.loading = false
          }
        }).catch(function (response) {
          this.$message.error(response.data)
          this.loading = false
        })

      }
    },
}
</script>

<style scoped>
  .project-content{
    background-color: #e9ecf2;
    padding:10px;
  }
  /*.project {*/
    /*background-color: white;*/
    /*margin-bottom: 10px;*/
  /*}*/
  /*.project:last-child{*/
    /*margin: 0;*/
  /*}*/
  .operation{
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .chose{
    margin-left: 10px;
  }
  .generate-report{
    margin:0 auto;
    /*background: red;*/
    width: 98px;
    margin-top: 40px;
  }
</style>
